<template>
  <div class="home">
    <form>
      <div class="user">
        <label for="">账号：</label>
        <input type="text" placeholder="请输入6位登录账号" v-model="userRequestData.id_value">
      </div>
      <div class="user pwd">
        <label for="">密码：</label>
        <input type="password" placeholder="请输入6位密码"  v-model="userRequestData.pwd_value">
      </div>
    </form>

    <button @click="verify_login">{{login_status}}</button>

<!--    弹窗提示-->
    <div class="phone_pop">{{phone_pop_status}}</div>
    <div class="pwd_pop">{{pwd_pop_status}}</div>
  </div>
</template>

<script>
import Login from "@/assets/api/login.js";

// import axios from "axios";

export default {
  name:'LoginModule',
  data(){
    return{
      // 账号密码
      userRequestData:{
        id_value:'',
        pwd_value:'',
      },
      responseData:'',

      // 账号密码验证状态
      phone_pop_status:" ",
      pwd_pop_status:" ",
      //登录状态
      login_status: "登录"
    }
  },
  methods: {
    // 登录验证
    verify_login() {
      //测试账号-----无需经过网络
      if(this.userRequestData.id_value==='0'){
        if(this.userRequestData.pwd_value==='0'){
          let user = {
            user_name:'系统测试账号',
            user_account:0
          }
          this.$store.commit('setresponse',this.responseData)
          //保存登录信息至本地
          localStorage.setItem('familiar_with_qujingmap_userinfo',JSON.stringify(user))
          this.router_push_function()
          return
        }
      }
      
      //网络登录逻辑
      if (this.userRequestData.id_value.length >= 1) {
        // console.log("手机号格式正确!")
        this.phone_pop_status = " "  //手机号状态置空
        //验证密码
        if (this.userRequestData.pwd_value.length >= 1) {
          // console.log("密码格式正确!")
          this.pwd_pop_status = " "  //密码状态置空
          //与服务器交互，验证登录……
          this.loginRequest();
        } else {
          console.log("密码位数不足!")
          this.pwd_pop_status = "密码位数不足!"
        }
      } else {
        console.log("账号位数不足!")
        this.phone_pop_status = "账号位数不足!"
      }
    },


    
    // 跳转功能页面
    router_push_function() {
      this.$router.push('/function')
    },

    
    //登录请求
    loginRequest() {
      this.login_status = "登录中…"
      // console.log('账号：',this.userRequestData.id_value,',密码：',this.userRequestData.pwd_value)
      Login.login_request(this.userRequestData.id_value,this.userRequestData.pwd_value).then((data) => {
        console.log('请求回传信息：',data)
        if(data.success){
          this.login_status = '登录成功！'  
          //登录成功
          this.$store.commit('setresponse',data)   //提交至vuex
          //保存登录信息至本地
          localStorage.setItem('familiar_with_qujingmap_userinfo',JSON.stringify(data.user))
          //跳转
          this.router_push_function()
        }else{
          this.login_status = '登录失败！'  
          this.pwd_pop_status = data.message
          setTimeout(()=>{
             this.login_status = '登录'   
             this.pwd_pop_status = '' 
             this.phone_pop_status = " "    
          },2000)
        }

      })    //login请求
  
      /*
              //服务器回传数据提交到vuex
              this.$store.commit('setresponse',this.responseData)
              //保存登录信息至本地
              localStorage.setItem('userinfo',JSON.stringify(this.responseData))
              // let userinfo = localStorage.getItem('userinfo')
              // console.log('存入本地的信息：', userinfo);
              this.login_status = "登录成功"
            
            this.pwd_pop_status = "无法访问内网！！！"
            this.login_status = "登录失败"
      */  
    },
    



  },


}
</script>


<style scoped>
  .home{
    color: rgb(238, 231, 231);
    width: 100%;
    height: 100%;
    font-weight: bolder;
    /* background-color: #222203; */
  }
  .user{
    width: 300px;
    height: 40px;
    /* background-color: yellow; */
    position: relative;
    top: 20px;
    left: calc(50% - 150px);
  }
  .pwd{
    margin-top: 20px;
  }
  label{
    display: block;
    width: 50px;
    height: 100%;
    //background-color: red;
    text-align: center;
    line-height: 40px;
    float: left;
  }
  input{
    width: 220px;
    height: 30px;
    position: relative;
    top: 5px;
    left: 0px;
    border-radius: 7px;
    border: none;
    outline: none;
    color: rgb(216, 105, 14);
    padding-left: 10px;
  }
  button{
    background-color: rgb(195, 202, 197);
    width: 100px;
    height: 30px;
    position: relative;
    top: 50px;
    left: calc(50% - 50px);
    border-radius: 10px;
    /* border: 1px solid rgb(35, 218, 44); */
    box-sizing: border-box;
    box-shadow: 0 0 5px 3px black;
    font-weight: bolder;
    color: rgb(78, 77, 53);
  }
  button:hover{
    font-size: 1vw;
    font-weight: bolder;
    color: rgb(63, 172, 112);
    border: 1px solid rgb(48, 82, 175);
  }
  button:active{
    background-color: greenyellow;
    color: black;
  }


  .phone_pop{
    width: 300px;
    height: 20px;
    //background-color: red;
    position: relative;
    top: -75px;
    left: 170px;
    font-size: 10px;
    text-align: left;
    color: red;
  }
  .pwd_pop{
    width: 300px;
    height: 20px;
    //background-color: red;
    position: relative;
    top: -35px;
    left: 170px;
    font-size: 10px;
    text-align: left;
    color: red;
  }
</style>
